<template>
  <a-modal :open="open" width="1300px" title="患者列表" :footer="false" centered @cancel="onCancel">
    <a-form ref="formRef" :model="formState" class="form-style-flex">
      <a-form-item name="pyjm" class="w-1/3">
        <a-input v-model:value="formState.pyjm" placeholder="姓名/助记码/卡号/手机号/身份证号" />
      </a-form-item>
      <a-form-item name="dateRange" label="日期范围" class="w-1/3">
        <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </a-form-item>
    </a-form>
    <div class="flex mb-2 justify-between">
      <div class="flex">
        <a-radio-group v-model:value="formState.ghzt" button-style="solid" @change="getData()">
          <a-radio-button v-for="(item, index) in activeArray" :key="index" :value="item.key">{{ item.title }}({{ item.count }})</a-radio-button>
        </a-radio-group>
      </div>
      <div>
        <a-space wrap>
          <a-button @click="onClickReset">重置</a-button>
          <a-button type="primary" @click="onClickSearch()">刷新</a-button>
        </a-space>
      </div>
    </div>
    <BaseTable :loading="loading" column-code="00001188" :data-source="tableData" bordered :height="505" :pagination="pagination" :scroll="{ x: 1100 }">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag v-if="record.status === 0" color="blue">等候中</a-tag>
          <a-tag v-else-if="record.status === 3" color="green">服务中</a-tag>
          <a-tag v-else-if="record.status === 1" color="blue">已结束</a-tag>
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import BaseTable from '@/components/BaseTable'
import useUserStore from '@/store/user'

const { empId } = useUserStore()
const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const activeArray = ref([
  { key: '', title: '全部' },
  { key: 0, title: '等候中' },
  { key: 3, title: '服务中' },
  { key: 1, title: '已结束' }
])

const doctor = ref(true)
const formRef = ref(null)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  ghzt: '',
  ghys: empId,
  type: 0
})

const onClickSearch = () => {
  getData()
}
const { loading, tableData, pagination, getData } = useTable({
  url: '/course/courseProgressNotes/getCourseProgressList',
  immediate: true,
  params: {},
  formatParams: () => {
    return {
      ...formState.value,
      startTime: formState.value['dateRange']?.[0],
      endTime: formState.value['dateRange']?.[1],
      status: formState.value.ghzt === 0 || formState.value.ghzt ? [formState.value.ghzt] : []
    }
  },
  formatResult: (result) => {
    activeArray.value[0].count = result.qb
    activeArray.value[1].count = result.dhz
    activeArray.value[2].count = result.fwz
    activeArray.value[3].count = result.yjs
    return result.courseProgressList
  }
})
const onClickReset = () => {
  doctor.value = false
  formState.value = {
    dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
    ghzt: '',
    type: 0
  }
}
const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
    } else {
      tableData.value = []
      onClickReset()
    }
  }
)
</script>

<style lang="less" scoped>
.button-active {
  line-height: 30px;
  border: 1px solid var(--primary-color);
}
.active {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
